<template>
    <view class="columnbox wdh-100 content">
        <view class="rowbox  spb one-info" @click="addImg">
            <view>头像</view>
            <view class="rowbox" v-if="userimg==''">选择
                <view style="margin-left: 10rpx;">
                    <u-icon name="arrow-right" size="24rpx"></u-icon>
                </view>
            </view>
            <image v-else :src="userimg.url" mode="aspectFill"
                style="width: 100rpx;height: 100rpx;border-radius: 100rpx;">
            </image>
        </view>
        <view class="rowbox  spb one-info">
            <view>姓名</view>
            <input v-model="userName" placeholder="请输入" />
        </view>
        <view class="rowbox  spb one-info">
            <view>电话</view>
            <input v-model="phonenumber" placeholder="请输入" />
        </view>
        <view class="rowbox  spb one-info" @click="chooseOneStation">
            <view>所属洗车站</view>
            <view class="rowbox">
                {{station==''?'选择':station.name}}
                <view style="margin-left: 10rpx;">
                    <u-icon name="arrow-right" size="24rpx"></u-icon>
                </view>
            </view>
        </view>
        <view class="small-btn one-btn" @click="submitInfo">保存</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userimg: '',
                userName: '',
                stationId: '',
                phonenumber: '',
                station: '',
                submitflag: false,
                id: ''
            };
        },
        onLoad(options) {
            if (options.id) {
                this.id = options.id
                this.getDetail()
            }
        },
        methods: {
            getDetail() {
                this.$req.get(`/xcx/stationWorker/${this.id}`).then(res => {
                    let info = res.data.data
                    this.userimg = {
                        flag: false,
                        url: info.avatar
                    }
                    this.userName = info.userName
                    this.phonenumber = info.phonenumber
                    this.station = {
                        name: info.stationName,
                        stationId: info.stationId
                    }
                })
            },
            chooseOneStation() {
                uni.navigateTo({
                    url: '/packageA/staff/chooseStation'
                })
            },
            addImg() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        this.userimg = {
                            flag: true,
                            url: res.tempFilePaths[0]
                        }
                    }
                })
            },
            async submitInfo() {
                if (!this.submitflag) {
                    this.submitflag = true
                    uni.showLoading({
                        title: '正在提交'
                    })
                    let list = await this.sendImg(this.userimg)
                    if (this.id != '') {
                        this.$req.put('/xcx/stationWorker', {
                            'id': this.id,
                            'avatar': list,
                            'userName': this.userName,
                            'stationId': this.station.stationId,
                            'phonenumber': this.phonenumber,
                            "stationName": this.station.name,
                        }).then(res => {
                            uni.hideLoading()
                            this.submitflag = false
                            if (res.data.code == 200) {
                                uni.showModal({
                                    title: '修改成功',
                                    content: '',
                                    success: () => {
                                        let pages = getCurrentPages(); //获取所有页面栈实例列表
                                        let nowPage = pages[pages.length - 1]; //当前页页面实例
                                        let prevPage = pages[pages.length - 2]; //上一页页面实例
                                        prevPage.$vm.refreshflag = true
                                        uni.navigateBack()
                                    }
                                })
                            } else {
                                uni.showModal({
                                    title: res.data.msg,
                                    success: () => {}
                                })
                            }
                        })
                    } else {
                        this.$req.post('/xcx/stationWorker', {
                            'avatar': list,
                            'userName': this.userName,
                            'stationId': this.station.stationId,
                            'phonenumber': this.phonenumber,
                            "stationName": this.station.name,
                        }).then(res => {
                            uni.hideLoading()
                            this.submitflag = false
                            if (res.data.code == 200) {
                                uni.showModal({
                                    title: '添加成功',
                                    content: '',
                                    success: () => {
                                        let pages = getCurrentPages(); //获取所有页面栈实例列表
                                        let nowPage = pages[pages.length - 1]; //当前页页面实例
                                        let prevPage = pages[pages.length - 2]; //上一页页面实例
                                        prevPage.$vm.refreshflag = true
                                        uni.navigateBack()
                                    }
                                })
                            } else {
                                uni.showModal({
                                    title: res.data.msg,
                                    success: () => {}
                                })
                            }
                        })
                    }
                }
            },
            sendImg(v) {
                return new Promise((resolve, reject) => {
                    if (v.flag) {
                        this.$req.uploadImg(v.url).then(res => {
                            resolve(res.data.url)
                        })
                    } else {
                        resolve(v.url)
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        font-family: PingFang SC;
    }

    .one-info {
        width: 710rpx;
        padding: 32rpx 20rpx;
        border-bottom: #eef0f7 solid 1px;
        font-size: 28rpx;

        input {
            text-align: right;
            font-size: 28rpx;
        }
    }

    .right-box {
        width: 500rpx;
    }

    .img-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .add-img {
        width: 120rpx;
        height: 120rpx;
        border: #c9ccd4 solid 1px;
        border-radius: 10rpx;
        margin-right: 20rpx;
        position: relative;
        margin-bottom: 10rpx;

        image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
        }

        .delet-box {
            position: absolute;
            right: 0;
            top: 0;
            background: rgba(#fff, .7);
            border-radius: 100rpx;
        }
    }

    .top-box {
        margin-top: 20rpx;
        padding: 20rpx 32rpx;
        font-size: 32rpx;
        border-top: #eef0f7 solid 20rpx;

        image {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
        }
    }

    .one-btn {
        width: 710rpx;
        height: 90rpx;
        border-radius: 20rpx;
        margin: 40rpx 0;
    }

    .station-box {
        padding: 20rpx 20rpx;

        .station-img {
            width: 200rpx;
            height: 150rpx;
            border-radius: 20rpx;
            margin-right: 20rpx;
        }

        .s-name {
            font-size: 32rpx;
            font-weight: bold;
        }

        .s-address {
            font-size: 28rpx;
            color: #7a7a7a;
            margin-top: 20rpx;
        }
    }
</style>